<template>
  <div class="settings">
    <!--审批历史-->
    <historyLook :visible.sync="lookHistory" :historyTables="historyTables" :isMobile="isMobile"/>
    <!--退库\领用详情-->
    <el-dialog  :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="showDetail" append-to-body
                :width="isMobile ? '90%' : '50%'" height="50%">
      <mobileDetail :detail-data="detailData" :lookType="lookType" ></mobileDetail>
    </el-dialog>
   <div v-if="!isMobile">
      <el-card class="box-card">
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="tableData" border v-loading="loading">
        <el-table-column type="index" label="序号" v-if="false" align="center" width="50"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="approvalName" label="事项" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="applyTime" label="时间" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="applyerName" label="发起人" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <div class="optBtn-box">
              <el-button v-if="scope.row.documentTable === 'materail_draw_apply' || scope.row.documentTable === 'stock_return_apply'" @click="look(scope.row)" type="text">查看</el-button>
              <el-button v-if="scope.row.documentTable === 'import_approval_apply'" @click="download(scope.row)" type="text">下载PDF</el-button>
              <el-button @click="showHistoryTables(scope.row)" type="text">审批历史</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
        <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.pageNo" :page-sizes="[25,50]" :page-size="page.pageSize" layout="sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>
   </div>
   <!-- 手机 -->
  <div class="mobile-box" v-else>
    <div >
      <ul v-if="tableData.length" v-loading="loading">
        <li class="list-item" v-for="item in tableData" :key="item.id">
          <el-card>
            <el-col :span="24">
              <div>事项：{{ item.approvalName }}</div>
            </el-col>
            <el-col :span="24">
              <div>时间：{{ item.applyTime }}</div>
            </el-col>
            <el-col :span="24">
              <div>备注：{{ item.remark }}</div>
            </el-col>
            <el-col :span="24">
              <div>发起人：{{ item.applyerName }}</div>
            </el-col>
            <el-col :span="24" class="btn-box">
              <el-button type="primary" size="mini" @click="showHistoryTables(item)">审批历史</el-button>
              <el-button v-if="item.documentTable === 'import_approval_apply'" type="primary" size="mini" @click="download(item)">PDF</el-button>
              <el-button v-if="item.documentTable === 'materail_draw_apply' || item.documentTable === 'stock_return_apply'" type="primary" size="mini" @click="lookMobile(item)">详情</el-button>
            </el-col>
          </el-card>
        </li>
        <el-pagination
          v-if="total >= page.pageSize"
          style="text-align: center; width: 90%; overflow: auto"
          :disabled="loading"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[25, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>


      </ul>
      <div v-if="!tableData.length" class="no-data">
        <img :src="require('../../assets/noData.jpg')" />
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { myDoneList, getHistoryLook, postWithdraw } from '@/api/user'
import { downloadFileById, downLoadForPdf } from '@/api/importApply.js'

//领用、退库申请详情
import { drawApplyDetail ,getwlId} from '@/api/materialScience/materialRequisition.js'
import { applyReturnStockDetail } from '@/api/materialScience/stockReturn.js'

import historyLook from '@/components/historyLook'
import  mobileDetail from  '../agency/mobileDetail.vue'

import { mapState } from 'vuex'
export default {
  components: { historyLook,mobileDetail },
  computed: {
    ...mapState(['authList'])
  },
  data: () => ({
    tableData: [],
    historyTables: [],
    loading: false,
    page: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    lookHistory: false,
    row: {},
    isMobile: false,
    detailData: {
      materailDTOS:[{
        materailName:'',
        materailNumber:'',
        singlePrice:'',
        amount:'',
        unit:''
      }]
    },
    lookType:'',
    showDetail: false
  }),
  created () {
    if (this.$utils.isMobile()) {
      this.isMobile = true
    }
    this.getList()
  },
  methods: {
    // 审批历史
    history (row) {
      getHistoryLook(row.processInstanceId).then(res => {
        this.historyTables = res.data.data


      })
    },
    // 下载PDF
    download (row) {
      window.open('http://47.98.96.200:10084/material/import/downLoadForPdf?importApplyId=' + row.documentId)

    },

    authFilter (code) {
      let flag = false
      if (this.authList.length) {
        this.authList.forEach(item => {
          if (item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    // 获取待办list
    getList () {
      this.loading = true
      myDoneList(this.page)
        .then((res) => {
          this.loading = false
          if (res.data.code != 200) {
            this.$message.error(res.data.message)
            return
          }
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        })
        .catch((err) => {
          this.loading = true
        })
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    },
    handleSizeChange (size) {
      this.page.pageSize = size
      this.getList()
    },
    look (row) {
      switch (row.documentTable) {
        case 'materail_draw_apply':
          this.showDetail = true
          this.lookType = row.documentTable
          this.drawApplyDetail(row.documentId)
          break
        case 'stock_return_apply':
          this.showDetail = true
          this.lookType = row.documentTable
          this.applyReturnStockDetail(row.documentId)
         break
        case 'material_basic_info':
          this.$router.push({
            name: 'materialScience',
            params: {
              id: row.documentId
            }
          })
          break
        case 'procurement_plan':
          this.$router.push({
            name: 'purchase',
            params: {
              id: row.documentId
            }
          })
          break
        case 'warehousing_apply':
          this.$router.push({
            name: 'warehousingApplication',
            params: {
              id: row.documentId
            }
          })
          break
        case 'import_approval_apply':
          downloadFileById(row.documentId).then(res => {
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
            window.open(res.data.data)
          })
          break
        default:
          break
      }
    },
    //手机查看审批历史
    showHistoryTables (item) {
      this.lookHistory = true
      this.history(item)
    },
    // 关闭详情弹窗
    closeDetailFun () {
      // this.lookHistory = false
      this.showDetail = false
      this.historyTables = {}
      this.detailData= {
        materailDTOS:[{
          materailName:'',
          materailNumber:''
        }]
      }

    },
    //申请详情
    lookMobile(item){
      //退库
      if(item.documentTable === 'stock_return_apply') {
        this.showDetail = true
        this.lookType = item.documentTable
        this.applyReturnStockDetail(item.documentId)
        // this.findReturnMaterailDetail(item.documentId)
      }
      //领用
      if(item.documentTable === 'materail_draw_apply') {
        this.showDetail = true
        this.lookType = item.documentTable
        this.drawApplyDetail(item.documentId)
        // this.getwlId(item.documentId)
      }
    },
    // 物料退库详情
    applyReturnStockDetail (id) {
      this.loading = true
      applyReturnStockDetail(id).then(res => {
        this.loading = false
        if (res.data.code != 200) {
          return this.$message.error(res.data.message)
        }
        this.detailData = res.data.data
      }).catch(err => { this.loading = false })
    },
    // 退库申请材料详情
    // findReturnMaterailDetail (id) {
    //   this.loading = true
    //   findReturnMaterailDetail(id).then(res => {
    //     this.loading = false
    //   if (res.data.code != 200) {
    //     return this.$message.error(res.data.message)
    //   }
    //   this.detailData = res.data.data
    // }).catch(err => { this.loading = false })
    // },
    //物资领用申请详情
    drawApplyDetail(id) {
      this.loading = true
      drawApplyDetail(id).then(res => {
        this.loading = false
        if (res.data.code != 200) {
          return this.$message.error(res.data.message)
        }
        this.detailData = res.data.data
      }).catch(err => {
        this.loading = false
      })
    },
    // 领用物资材料详情
    // getwlId(id){
    //   this.loading = true
    //   getwlId(id).then(res => {
    //     this.loading = false
    //     if (res.data.code != 200) {
    //       return this.$message.error(res.data.message)
    //     }
    //     this.detailData = res.data.data
    //   }).catch(err => {
    //     this.loading = false
    //   })
    // }
  }
}
</script>

<style scoped lang="scss">
@mixin box-width {
  width: 90%;
  margin: 10px auto;
}
.mobile-box {
  position: relative;
  .el-row{
    display: flex;
    flex-direction: column;
  }
  .btn-data {
    @include box-width;
  }
  .mobile-seacher-box{
   width: 90%;
    margin: 10px auto;
  }
  ul {
    padding: 0;
    & > li {
      @include box-width;
      list-style-type: none;
      .btn-box {
        text-align: right;
        margin-bottom: 10px;
      }
      .el-col {
        margin: 5px 0;
      }
    }
  }
  .no-data {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 400px;
    }
  }
  .addForm {
    .el-input,
    .el-select,
    .el-textarea{
      width: 100%;
    }
    .el-form-item{
      padding: 0 20px;
      margin-bottom: 10px;
      .btn-box{
        width: 100%;
        text-align: center;
        margin: 20px 0;
        .el-button{
          width: 45%;
        }
      }
    }
  }
  .detail-box{
    overflow: auto;
    div{
      margin: 5px 0;
      font-size: 15px;
    }
  }
}
  .avatar-img {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
  }

  .id-tel-input {
    border: none;
    outline: none;
  }

  .preview-image-wrap {
    .preview-image {
      display: block;
      max-width: 100%;
      height: 200px;
    }
  }

</style>
